<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Data Admin Presentation</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 		<link type="text/css" rel="stylesheet" href="css/bootstrap.css" /> -->
		<link type="text/css" rel="stylesheet" href="css/main.css" />
<!-- 		<link type="text/css" rel="stylesheet" href="css/pagination.css" /> -->
		<link rel="stylesheet" type="text/css" media="screen" href="css/chosen/chosen.css" />
		<link rel="stylesheet/less" href="css/less/main.less" />
		<script type="text/javascript" src="js/lib/less-1.3.0.min.js"></script>
<!-- 		<link type="text/css" rel="stylesheet" href="css/bootstrap.css" /> -->
		<link type="text/css" rel="stylesheet" href="css/main.css" />
		
		<link type="text/css" rel="stylesheet" href="css/jquery-ui-1.8.21.custom.css"/>
		<link rel="stylesheet" type="text/css" media="screen"
			href="js/lib/poshytip/tip-darkgray/tip-darkgray.css" />
		<link rel="stylesheet" type="text/css" href="css/select2/select2.css">
		
		
		<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
        <link rel="stylesheet" href="css/bootstrap-image-gallery.css">
        <link rel="stylesheet" href="css/jquery.fileupload-ui.css">
        
		<style>
		td > input[type="text"]{
			width:80px;
		}
		
		textarea{
			width:100px;
		}
		</style>
		<!--[if IE 7]> 
		<style>
		.alpha{
			margin-top:8px;
		}
		</style>
		<![endif]-->
		
		<!-- Templates Here -->
									 <!-- <% var css=false; if(entry.length == 1) {css="style='display:none'";}%>
									 <%if(!css){%>
										 <ul class="dropdown-menu">
											<li><div class="switch" data-left="View" data-right="Add" step="toggleControl" clicking="setOverflow" clicked="rmOverflow"></div></li>
										 </ul>
									<%}%> -->			
		<script type="text/template" id="block_template">
				<div class="panel-container">
					<div class="panel-header">
						<div class="panel-title"><%= title %></div>
						<div class="panel-subtitle"></div>
						<div class="panel-tab">
							<div>
								<ul class="nav nav-pills">
								<li class="active" entry="1">
									<a href="javascript:void(0)" class="dropdown-toggle"><%= entry%></a>							 
								</li>
							</div>
							<span class="triangle"></span>	
						</div>
						<div class="panel-line"> </div>
						<div class="close"></div>
					</div>
					<div class="panel-body"></div>
				</div>
		</script>
		<script type="text/template" id="actionmenu_template">
				 <li>
				 	<a href="javascript:void(0)" class="dropdown-toggle"><span></span><b class="caret"></b></a>
					<ul class="dropdown-menu">
					   <li><div class="switch" data-left="ReadOnly" data-right="Edit" clicking="setOverflow" clicked="rmOverflow"></div></li>
					   <li class='divider'></li>
					   <li><button class="btn btn-success">Save</button></li>
					   <li class='divider'></li>
					   <li><button class="btn btn-danger">Purge</button></li>
					</ul>								 
				 </li>			
		</script>
<!-- 								 <li>
								    <a href="javascript:void(0)">link</a>
								 </li>
								 								 <li class="active">
								    <a href="javascript:void(0)" class="dropdown-toggle">
								    	link
								    	<b class="caret"></b></a>
								    	<ul class="dropdown-menu">
									      <li><button class="btn btn-small btn-primary" type="button">Small1 button</button></li>
									      <li><button class="btn btn-small btn-primary" type="button">Small2 button</button></li>
									      <li><button class="btn btn-small btn-primary" type="button">Small3 button</button></li>
									    </ul>
								 </li> -->
		<script type="text/template" id="toggle_template">
			<div class="switch-wrapper">
			<div class="opt left" style="width:100%">&nbsp;&nbsp;<%= left %></div>
			<div class="opt right" style="width:0%"><%= right %>&nbsp;&nbsp;</div>
			<span class="helper">&nbsp;&nbsp;<%= left %></span>
			<span class="helper"><%= right %>&nbsp;&nbsp;</span>
			<div class="bar"></div>
			</div>
		</script>	
	
		<script type="text/template" id="combo_template">
			<select data-placeholder="<%= hint%>" class="combo-box">
				<option value=""></option>
				<%for(var i=0;i<opts.length;i++){%>	
					<%var opt=opts[i];%>
					<option ><%= opt%></option>
				<%}%>
			</select>
		</script>	
	
		<script type="text/template" id="tipItem_template">
			<li class="divider"></li>
			<li class="menu-item"> 
				<div class="item-wrapper">
					<span class='tip-val'> 
					<%= v[0]%>
					</span>
					<span class='type-wrapper'>
						<%= v[1]%>
					</span>
				</div>
			</li>				
		</script>
	
		<script type="text/template" id="typesel_template">
			<div class="type-selector">
			    <span class="ltri"></span>
			    <span class="typesel-body">
				    <i class="icon-tags icon-white"></i>
				    <ul>
				      <li>
				          	<span><h4><%= val[0]%></h4><b></b></span>
					        <ul>
							<%for(var i = 1; i<val.length; i++){%>
								<% if(val[i]==val[0]){%>
									<li class="selected">
								<%}else{%>			        	
					        		<li>
					        	<%}%>
					        	<h4><%= val[i]%> </h4></li>
					        <%}%>
		
					        </ul>
	
				      </li>
				    </ul>
				    <button class="close icon-white">&times;</button>
			    </span>
			</div>
		</script>	

		<script type="text/template" id="search_template">
			<div class="search-box ">
				<div class="switch" data-left="View" data-right="Add" step="toggleControl" clicking="setOverflow" clicked="rmOverflow"></div>
				<div class="input-prepend">
                  <span class="add-on"><i class="icon-search"></i></span><input type="text" placeholder="Type an identifier..."/>
                <div class='sticky'></div>
                </div>
				
				<div class="add-option">
					<div class="opt-view-port">
						<div class="switch" data-left="Quote" data-right="Issue" step="toggleInput" clicking="setShow" clicked="setHide"></div>
						<div class="combo" change="updateCategory"></div>
						<div class="combo"></div>
					</div>
				</div>
				<button class="btn">Go!</button>
			</div>
		</script>

		<script type="text/template" id="line_template">
			<div class="line-editor">
				<%for(var i in fields){%>
					<%var f=fields[i];%>	
					<div>
						<div class="input-prepend">
							<span class="add-on"><%= f[0]%></span><input class="span2" size="16" type="text" col="<%= f[1]%>"/>
						</div>
					</div>
				<%}%>
			</div>	
		</script>
								
		<script type="text/template" id="table_template">
			<table class="tablesorter table-hover table table-bordered table-striped"> 
				<thead> 
				<tr> 
					<%for(var i in headers){%>	
						<%var h=headers[i];%>
						<th><%= h%></th>
					<%}%>
				</tr>
				</thead>
				<tbody>
					<tr><td colspan="<%= headers.length%>"><center>No Data Found!</center></td></tr> 
				</tbody>
			</table> 	
		</script>
		<script type="text/template" id="rows_template">
			<%for(var i in data){%>	
				<%var row=data[i];%>
				<tr>
					<%for(var j=0;j<row.length;j++){%>	
						<%var c=row[j];%>
						<td><%= c%></td>
					<%}%>		
				</tr>
			<%}%>
		</script>	
		<script type="text/template" id="alert_template">
			<div class="alert fade in">
	            <button type="button" class="close" data-dismiss="alert">&times;</button>
	            <%= c%>
	          </div>
		</script>	
		<script type="text/template" id="table_search_template">
			<div class="search-line"></div>
			<div class="result-table"></div>
		</script>
		
		
		
		<script type="text/template" id="bulk_entry_template">
			<div id="bulk_init" class="item-wrapper">
                <!-- The fileinput-button span is used to style the file input field as button -->
                <button type="button" id="btnbulkload" class="btn btn-primary load">
                    <i class="icon-upload icon-white"></i>
                    <span>Upload Files</span>
                </button>
                <button type="button" id="btnloadhistory" class="btn btn-primary history">
                    <i class="icon-search icon-white"></i>
                    <span>View History</span>
                </button>
            </div>
		</script>
		<script type="text/template" id="bulk_upload_template">			
			<div id="bulk_container" class="container-fluid">			    
			    <!-- The file upload form used as target for the file upload widget -->
			    <form id="fileupload" action="http://localhost:8888" method="POST" enctype="multipart/form-data">
			        <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
			        <div class="row fileupload-buttonbar">
			        	<div class="span3">
			        		<label class="control-label">File Type
		                        <select class="control" name="filetype" style="width:150px" >
		                            <option value="IAA" selected="selected">Issue Asset Add</option>
		                            <option value="IAC" >Issue Asset Change</option>
		                            <option value="IAD" >Issue Asset Drop</option>
		                        </select></label>
		                   </div>
		                    <div class="span2">
		                    	<label>Priority:
		                            <select name="priority" style="width:50px" >
		                                <option value="1" selected="selected">1</option>
		                                <option value="2" >2</option>
		                                <option value="3" >3</option>
		                            </select>
		                        </label>
	                         </div>
			            <div class="span7">
			                <!-- The fileinput-button span is used to style the file input field as button -->			                
			                <span class="btn btn-small btn-primary fileinput-button">
			                    <i class="icon-plus icon-white"></i>
			                    <span>Add files...</span>
			                    <input type="file" name="files[]" multiple>
			                </span>
			                <button type="submit" class="btn btn-small btn-primary start">
			                    <i class="icon-upload icon-white"></i>
			                    <span>Start upload</span>
			                </button>
			                <button id="btnReset" type="reset" class="btn btn-small btn-primary cancel">
			                    <i class="icon-ban-circle icon-white"></i>
			                    <span>Clear List</span>
			                </button>			                
			                <input type="checkbox" class="toggle">			                
			                <!-- The loading indicator is shown during file processing -->
			        		<div class="fileupload-loading"></div>
			            </div>
			            <!-- The global progress information -->
			            <div class="span3 fileupload-progress fade">
			                <!-- The global progress bar -->
			                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
			                    <div class="bar" style="width:0%;"></div>
			                </div>
			                <!-- The extended global progress information -->
			                <div class="progress-extended">&nbsp;</div>
			            </div>
			        </div>
			        
			        <div style="overflow: scroll; width: auto; height: 250px">
			        <!-- The table listing the files available for upload/download -->
			        <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
			   		</div>
			    </form>			    
			</div>			
		</script>
		
		<!-- The template to display files available for upload -->
        <script id="template-upload" type="text/x-tmpl">
		{% for (var i=0, file; file=o.files[i]; i++) { %}
                <tr class="template-upload fade">                
                <td class="name"><span>{%=file.name%}</span></td>
                <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
		{% if (file.error) { %}
                <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
		{% } else if (o.files.valid && !i) { %}
                
                <td class="start">{% if (!o.options.autoUpload) { %}
                    <button class="btn btn-small btn-primary">
                        <i class="icon-upload icon-white"></i>
                        <span>{%=locale.fileupload.start%}</span>
                    </button>
			{% } %}</td>
			{% } else { %}
                <td colspan="2"></td>
			{% } %}
                <td class="cancel">{% if (!i) { %}
                    <button class="btn btn-small btn-primary">
                        <i class="icon-ban-circle icon-white"></i>
                        <span>{%=locale.fileupload.cancel%}</span>
                    </button>
			{% } %}</td>			
            </tr>
			{% } %}
        </script>
		<!-- The template to display files available for download -->
		<script id="template-download" type="text/x-tmpl">
		{% for (var i=0, file; file=o.files[i]; i++) { %}
		    <tr class="template-download fade">		    	
		        {% if (file.error) { %}		            
		            <td class="name"><span>{%=file.name%}</span></td>
		            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
		            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
		        {% } else { %}
		            <td class="name">
		                <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
		            </td>
		            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
		            <td class="destination"><span>/upload</span></td>
		            <td ></td>
		        {% } %}
		    </tr>
		{% } %}
		</script>
				
	</head>

	<body>
		<div id="main_body">
			<div id="header" class="header">
				<div class="index-logo"></div>
				<div class="title">Data Admin Presentation</div>
				<div class="signin-bar">
					<div class="signin_div">
						<button class="btn btn-primary signin" type="button">
							<b>Log In</b>
						</button>
					</div>
					<div class="pop-over clearfix fancy-scrollbar">
						<div class="header clearfix">
							<span class="header-title">Log In</span>
							<a class="close-btn js-close-popover" href="#">
								<span class="app-icon small-icon close-icon dark-hover"></span>
							</a>
						</div>
						<div class="content clearfix" style="">
							<div class="login-popover">
								<p>
									<label for="username">Username</label>
									<input id="username"
									name="username" title="username" type="text"
									placeholder="Username" />
								</p>
								<p>
									<label for="password">Password</label>
									<input id="password"
									name="password" title="password" type="password"
									placeholder="Password" />
								</p>
								<p class="remember">
									<input id="signin_submit" value="Log In" type="button" class="btn btn-success" />
									<input id="remember" name="remember_me" value="1" type="checkbox" />
									<b style="margin-left:2px;">Remember me</b>
								</p>
								<p class="forgot">
									<a href="javascript:void(0);" id="resend_password_link">Forgot your password?</a>
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="welcome-bar" style="display:none;">
					<div class="signin_div">
						<span>Welcome, XXX</span>
						<button class="btn btn-primary" id="logout_button" type="button">
							<b>Logout</b>
						</button>
					</div>
				</div>
			</div>

			<div class="body">
				<!-- main content here -->

			</div>
											
		</div>
		
		<script type="text/javascript" src="js/lib/jquery-1.8.0.min.js"></script>
		<script type="text/javascript" src="js/lib/underscore-min.js"></script>
		<script type="text/javascript" src="js/lib/backbone-min.js"></script>
		<script type="text/javascript" src="js/lib/zoomgrid/ZoomGrid.js"></script>
<!-- 		<script type="text/javascript" src="js/lib/zoomgrid/ZoomGridHighlight.js"></script>
		<script type="text/javascript" src="js/lib/zoomgrid/ZoomGridTransparency.js"></script>
		<script type="text/javascript" src="js/lib/zoomgrid/ZoomGridRestoreButton.js"></script>		 -->		
		<script type="text/javascript" src="js/lib/chosen.jquery.js"></script>	
		<script type="text/javascript" src="js/lib/jquery.pagination.js"></script>	
<!-- 		<script type="text/javascript" src="js/lib/bootstrap-rowlink.js"></script>	-->
		<script type="text/javascript" src="js/lib/bootstrap-alert.js"></script>
<!-- 		<script type="text/javascript" src="js/lib/bootstrap-popover.js"></script> -->
					
		<script type="text/javascript" src="js/utils.js"></script>		
		<script type="text/javascript" src="js/models.js"></script>
		<script type="text/javascript" src="js/popup.js"></script>

		<script type="text/javascript" src="js/views/Button.js"></script>		
		<script type="text/javascript" src="js/views/TipsMenu.js"></script>		
		<script type="text/javascript" src="js/views/AssetView.js"></script>		
		<script type="text/javascript" src="js/views/Block.js"></script>
		<script type="text/javascript" src="js/views/Layout.js"></script>
		<script type="text/javascript" src="js/views/Table.js"></script>
		<script type="text/javascript" src="js/views/InputList.js"></script>
		<script type="text/javascript" src="js/views/RootEntryView.js"></script>
		<script type="text/javascript" src="js/views/URicEntryView.js"></script>
		
		<script src="js/lib/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
		<script src="js/lib/mustache.js" type="text/javascript"></script>
		<script src="js/lib/bootstrap-dropdown.js" type="text/javascript"></script>
		<script src="js/lib/select2.js" type="text/javascript"></script>
		<script src="js/lib/poshytip/jquery.poshytip.js" type="text/javascript"></script>				
		<script src="js/lib/jquery.blockUI.js" type="text/javascript"></script>
		
		<!--lei -->
		<script src="js/lib/vendor/jquery.ui.widget.js"></script>
        <!-- The Templates plugin is included to render the upload/download listings -->
        <script src="js/lib/tmpl.js"></script>
        <!-- The Canvas to Blob plugin is included for image resizing functionality -->
        <script src="js/lib/canvas-to-blob.js"></script>
        <!-- Bootstrap JS and Bootstrap Image Gallery are not required, but included for the demo -->
        <script src="js/lib/bootstrap.min.js"></script>
        <script src="js/lib/bootstrap-image-gallery.js"></script>
        <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
        <script src="js/lib/jquery.iframe-transport.js"></script>
        <!-- The basic File Upload plugin -->
        <script src="js/lib/jquery.fileupload.js"></script>   
        <!-- The File Upload user interface plugin -->
        <script src="js/lib/jquery.fileupload-ui.js"></script>
        <!-- The localization script -->
        <script src="js/lib/locale.js"></script>
        <!-- The main application script -->
        <script src="js/lib/main.js"></script>
        <script type="text/javascript" src="js/lib/jquery.cookie.js"></script>
		
		<script type="text/javascript" src="js/views/BulkView.js"></script>
		<!--lei-->
		
		<!-- views -->
		<script src="js/backbone-page.js" type="text/javascript"></script>
		<script src="js/backbone-form.js" type="text/javascript"></script>
		<script src="js/backbone-form-jui-ext.js" type="text/javascript"></script>
		<script src="js/backbone-table.js" type="text/javascript"></script>
		
		<!-- templates -->
		<script src="js/templates/page-bootstrap.js" type="text/javascript"></script>
		<script src="js/templates/form-bootstrap.js" type="text/javascript"></script>
		<script src="js/templates/table-bootstrap.js" type="text/javascript"></script>
		
		<!-- page -->
		<script src="js/page/commodity.js" type="text/javascript"></script>
		
		<script type="text/javascript" src="js/jsonp.js"></script>
		<script type="text/javascript" src="js/app.js"></script>
		<script type="text/javascript">

			$(function(){
				var size={
					w:$(window).width(),
					h:$(window).height()
				}
				
				var body = new Layout({collection: ViewData.layout});
				$.each(view_model, function(k, v) {
					body.addSubView(k, v);
				});
				// for(var v in view_model){
					// body.addSubView(v, view_model[v]);
				// }	
				$(".body > .screen").height(size.h -70);
				body.currentGrid.restore(true);
				$(window).resize(function() {
				  body.currentGrid.restore(true);
				});	
				
				
				$('#fileupload').bind('fileuploadsubmit', function (e, data) {
	                var selects = $("select").serializeArray();
	                data.formData = selects;
	                console.log(data.formData);
            	});
            	
            	// $.cookie('priority','1', {expires: 7, path: '/'});
            	// console.info('priority: ' + $.cookie('priority'));
            	
            	var clearList = function() {            		
	        		var tbody = $("tbody.files");
	        		tbody.html('');
	        	};
            	
            	$("#btnReset").bind("click", clearList);
			})

		</script>

	</body>
</html>